<template>
    <div>
        <div>查询</div>
        <div>
            <div style="text-align:left;">
                <el-checkbox v-model="checked" >全选</el-checkbox>
            </div>
            <div v-for="(item, index) in orderData" :key="index" style="margin-top:30px;">
                <!--订单信息-->
                <div style="background-color:antiquewhite;text-align: left;;">
                    <el-row>
                        <el-col :span="1"> <el-checkbox v-model="checked"></el-checkbox> </el-col>
                        <el-col :span="18">
                            {{ item.orderNo }},<span style="color:red;">{{ item.amount.toFixed(2) }}</span>
                        </el-col>
                        <el-col :span="5" style="text-align:right;">
                            <router-link :to="{path:'/month/detail',query:{orderNo:item.orderNo}}">查看详情</router-link>
                        </el-col>
                    </el-row>
                </div>
                <!--订单对应的商品信息-->
                <div>
                    <el-table :data="item.items" style="width: 100%" :show-header="false">
                        <el-table-column  label="图片" width="180">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" style="width:50px;height:50px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="skuName" label="名称">
                        </el-table-column>
                        <el-table-column prop="skuPrice" label="价格" width="180">
                        </el-table-column>
                        <el-table-column prop="skuNumber" label="数量" width="180">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderData: [
                {
                    id: 1, orderNo: 'DD3905830485340', amount: 69.05, stateName: '待支付', date: '2023-7-6 12:25', payType: '微信'
                    , items: [
                        { id: 1, name: '华为手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 6015.58, number: 1 },
                        { id: 2, name: '小米手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 1500.58, number: 1 },
                        { id: 3, name: '苹果手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 1455.58, number: 1 },
                    ]
                },
                {
                    id: 2, orderNo: 'DD3905830485341', amount: 69.05, stateName: '待支付', date: '2023-7-6 12:25', payType: '微信'
                    , items: [
                        { id: 1, name: '华为手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 6015.58, number: 1 },
                        { id: 2, name: '小米手机pro 14', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 1500.58, number: 1 },
                    ]
                },
                {
                    id: 3, orderNo: 'DD3905830485342', amount: 69.05, stateName: '待支付', date: '2023-7-6 12:25', payType: '微信'
                    , items: [
                        { id: 1, name: '华为手机pro 1', image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', price: 6015.58, number: 1 },
                    ]
                },
            ],
            checked:false,
        }
    },
    mounted(){
        this.onloadOrderData()
    },
    methods:{
        //全选事件
        eventCheckAll(){
            this.checked = true;
        },
        onloadOrderData(){
            let url='http://localhost:5068/month'
            this.$http.get(url).then(res=>{
                this.orderData = res.data
            })
        }
    }
}
</script>